import { ref, onMounted, onUnmounted } from "vue";

export function useIntersectionObserver(targetRefs, options = { threshold: 0.1 }) {
  const visibilityStates = ref([]); // 用于存储多个元素的可见状态

  let observer = null;

  onMounted(() => {
    observer = new IntersectionObserver((entries) => {
      entries.forEach((entry, index) => {
        visibilityStates.value[index] = entry.isIntersecting;
      });
    }, options);

    targetRefs.forEach((targetRef, index) => {
      visibilityStates.value[index] = false; // 默认不可见
      if (targetRef.value) observer.observe(targetRef.value);
    });
  });

  onUnmounted(() => {
    if (observer) {
      observer.disconnect();
    }
  });

  return visibilityStates;
}
